<template>
  <div>
    <div class="header">
      <i class="el-icon-table-lamp"></i> zspt 校园路灯数据展示
    </div>
    <el-table ref="table" :data="roadLightData" stripe style="width: 100%;" height="390" id="scoll">
      <el-table-column type="index" width="60" align="center"></el-table-column>
      <el-table-column prop="area" label="地区" sortable align="center" width="100"></el-table-column>
      <el-table-column prop="name" label="路灯名称" align="center"></el-table-column>
      <el-table-column prop="location" label="所在位置" align="center"></el-table-column>
      <el-table-column prop="swtich" label="当前状态" align="center" width="100"></el-table-column>
      <el-table-column prop="time" label="采集时间" sortable align="center"></el-table-column>
      <el-table-column prop="loopCounter" label="采集频率" align="center"></el-table-column>
      <el-table-column prop="uuid" label="uuid" align="center"></el-table-column>
    </el-table>
    <div class="allEchartsBox">
      <div class="lineBarBox">
        <div class="lineBarHeader">zspt 校园各区路灯开关状态统计</div>
        <div id="line-bar" style="width: 540px;height: 250px;"></div>
      </div>
      <div class="pieBox">
        <div class="pieHeader"><i class="el-icon-table-lamp"></i> zspt 校园各区路灯个数占比</div>
        <div id="pie" style="width: 520px;height: 250px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import walden from '../../../assets/json/walden.json'
  export default {
    name: 'roadLight',
    data() {
      return {
        roadLightData: require('../../../assets/json/roadLight.json'),
        wCount: 0,
        eCount: 0,
        nCount: 0,
        wOpenCount: 0,
        wCloseCount: 0,
        wUnknownCount: 0,
        nOpenCount: 0,
        nCloseCount: 0,
        nUnknownCount: 0,
        eOpenCount: 0,
        eCloseCount: 0,
        eUnknownCount: 0
      }
    },
    mounted() {
      this.numberStatistics();
      this.tableScroll();
      this.drawLine();
    },
    methods: {
      tableScroll() {
        // 拿到表格挂载后的真实DOM
        const table = this.$refs.table;
        // 拿到表格中承载数据的div元素
        const divData = table.bodyWrapper;
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100);
        window.onresize = () => {
          return (() => {
            window.screenHeight = document.body.clientHeight;
            this.clientHeight = window.screenHeight;
          })()
        }
      },
      drawLine() {
        this.$echarts.registerTheme('walden',walden);
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('line-bar'));
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['开', '关', '未知']
          },
          xAxis: [
            {
              type: 'category',
              data: ['东区', '西区', '北区'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '个数 / 盏',
              min: 0,
              max: 47,
              interval: 10,
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: '个数 / 盏',
              min: 0,
              max: 5,
              interval: 1,
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: '开',
              type: 'bar',
              barWidth : 30, //柱图宽度
              data: [
                this.eOpenCount,this.wOpenCount,this.nOpenCount
              ],
              markPoint: {
              	data: [{
              		type: 'max',
              		name: 'Max'
              	},
              	{
              		type: 'min',
              		name: 'Min'
              	}]
              },
              label: {
                show: true,
                rotate: 60 // 旋转角度
              }
            },
            {
              name: '关',
              type: 'bar',
              barWidth : 30, //柱图宽度
              data: [
                this.eCloseCount,this.wCloseCount,this.nCloseCount
              ],
              markPoint: {
              	data: [{
              		type: 'max',
              		name: 'Max'
              	},
              	{
              		type: 'min',
              		name: 'Min'
              	}]
              },
              label: {
                show: true,
                rotate: 60 // 旋转角度
              }
            },
            {
              name: '未知',
              type: 'line',
              yAxisIndex: 1,
              barWidth : 30, //柱图宽度
              data: [
                this.eUnknownCount,this.wUnknownCount,this.nUnknownCount
              ],
              markPoint: {
              	data: [{
              		type: 'max',
              		name: 'Max'
              	},
              	{
              		type: 'min',
              		name: 'Min'
              	}]
              },
              label: {
                show: true,
                rotate: 0 // 旋转角度
              }
            }
          ]
        });
        window.addEventListener("resize", function() { //自动适应大小
        	myChart.resize();
        });
        // 1. 实例化对象
        var myChart1 = this.$echarts.init(document.getElementById('pie'));
        // 2.指定配置
        var ROOT_PATH ='https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
        const engineIcons = {
        	all: ROOT_PATH + '/data/asset/img/custom-gauge-panel.png '
        };
        var option1 = {
        	tooltip: {
        		trigger: 'item',
        		formatter: '{a} <br/>{b} : {c} ({d}%)'
        	},
        	legend: {
        		left: 'center'
        	},
        	toolbox: {
        		show: true,
        		feature: {
        			mark: { show: true },
        			dataView: { show: true,readOnly: false },
        			restore: { show: true }
        		}
        	},
        	series: [{
        		name: 'zspt 校园路灯',
        		type: 'pie',
        		radius: ['45%', '30%'],
        		center: ['46%', '51%'],
        		avoidLabelOverlap: false,
        		label: {
        			color: '#235894',
        			fontSize: 10,
        			minMargin: 5,
        			edgeDistance: 12
        		},
        		emphasis: {
        			label: {
        				show: true,
        				fontSize: '16',
        				fontWeight: 'bold',
        			},
        			itemStyle: {
        				shadowBlur: 10,
        				shadowOffsetX: 0,
        				shadowColor: 'rgba(0, 0, 0, 0.5)',
        				color: 'rgba(22,201,145,0.31)' // 高亮
        			}
        		},
        		labelLine: {
        			show: true,
        			length: 30,
        			length2: 15,
        			maxSurfaceAngle: 60
        		},
        		data: [{
        			value: this.eCount,
        			name: '东区',
        			label: {
        				formatter: [
        					'{title|{b}}{abg|}',
        					'  {weatherHead|Icon}{valueHead|个数}{rateHead|占比}',
        					'{hr|}',
        					'  {Sunny|}{value|{c}}{rate|{d}%}'
        				].join('\n'),
        				backgroundColor: '#eee',
        				borderColor: '#777',
        				borderWidth: 1,
        				borderRadius: 4,
        				rich: {
        					title: {
        						color: '#eee',
        						align: 'center'
        					},
        					abg: {
        						backgroundColor: '#333',
        						width: '100%',
        						align: 'right',
        						height: 25,
        						borderRadius: [4, 4, 0, 0]
        					},
        					Sunny: {
        						height: 30,
        						align: 'left',
        						backgroundColor: {
        							image: engineIcons.all
        						},
        					},
        					weatherHead: {
        						color: '#333',
        						height: 24,
        						align: 'left'
        					},
        					hr: {
        						borderColor: '#777',
        						width: '100%',
        						borderWidth: 0.5,
        						height: 0
        					},
        					value: {
        						width: 20,
        						padding: [0, 20, 0, 30],
        						align: 'left'
        					},
        					valueHead: {
        						color: '#333',
        						width: 20,
        						padding: [0, 20, 0, 30],
        						align: 'center'
        					},
        					rate: {
        						width: 40,
        						align: 'right',
        						padding: [0, 10, 0, 0]
        					},
        					rateHead: {
        						color: '#333',
        						width: 40,
        						align: 'center',
        						padding: [0, 10, 0, 0]
        					}
        				}
        			}
        		},
        		{
        			value: this.wCount,
        			name: '西区',
              label: {formatter: '{b} : {c} ({d}%)'}
        		},
        		{
        			value: this.nCount,
        			name: '北区',
              label: {formatter: '{b} : {c} ({d}%)'}
        		}]
        	}]
        };
        // 3. 把配置给实例对象
        myChart1.setOption(option1);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() { //自动适应大小
        	myChart1.resize();
        });
      },
      numberStatistics() {
        this.roadLightData.forEach(item => {
          if(item.area.indexOf('西区') != -1){
            this.wCount++;
            if(item.swtich == 'true'){
              this.wOpenCount++;
            }else {
              if(item.swtich == 'false'){
                this.wCloseCount++;
              }else this.wUnknownCount++;
            }
          }
          if(item.area.indexOf('东区') != -1){
            this.eCount++;
            if(item.swtich == 'true'){
              this.eOpenCount++;
            }else {
              if(item.swtich == 'false'){
                this.eCloseCount++;
              }else this.eUnknownCount++;
            }
          }
          if(item.area.indexOf('北区') != -1){
            this.nCount++;
            if(item.swtich == 'true'){
              this.nOpenCount++;
            }else {
              if(item.swtich == 'false'){
                this.nCloseCount++;
              }else this.nUnknownCount++;
            }
          }
          
        })
      }
    }
  }
</script>

<style>
  @import url("../../../assets/css/roadLight.css");
</style>
